<template>
  <div>
    <hsa-adaptive-container>
      <hsa-adaptive-pane>
        <hsa-title-pane>
          <hsa-title-pane-item
            title="查询条件"
          >
            <t-query-condition
              :opts="opts"
              @submit="conditionEnter"
              @handleEvent="handleEvent"
              isExpansion
              isShowWidthSize
              :widthSize="4"
            />
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <hsa-adaptive-pane autoHeight>
        <hsa-title-pane>
          <hsa-title-pane-item
            title="接口签权审批"
          >
            <!-- <template #toolbar>
              <el-button type="primary">新建</el-button>
            </template> -->
            <div>
              <t-table
                :table="table"
                :columns="table.columns"
                :tableLoading="tableLoading"
                @page-change="pageChange"
                @size-change="sizeChange"
                isPaginationCumulative
              />
            </div>
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
    </hsa-adaptive-container>
    <fetch-download-examine ref="myExamine" />
    <fetch-download-info ref="myDetail" />
    <log-box ref="myLog" />
  </div>
</template>
<script setup lang="ts">
import fetchDownloadExamine from "./model/fetch-download-examine.vue";
import fetchDownloadInfo from "./model/fetch-download-info.vue";
import logBox from "./model/log-box.vue";
// import hsaAdaptiveContainer from '@/components/hsa/adaptive/container.vue'
// import hsaAdaptivePane from '@/components/hsa/adaptive/pane.vue'
// import HasTitle from "@/components/hsa/title-box.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import apiAxios from "@/api/SelfFetch/fetch-download-manage-data";
import { PAth } from "@/api/SelfFetch/query";
const queryFrom = ref(PAth());
const tableLoading = ref<boolean>(false)
console.log(queryFrom,'queryFrom');

const myExamine = ref(null);
const myDetail = ref(null);
const myLog = ref(null);
const examineHandle = () => {
  myExamine.value.open("审批");
};

const showInfo = (row: any) => {
  myDetail.value.open(row);
}
const logHandle = (row: any) => {
  myLog.value.open(row);
}
const table = ref<TableTypes.Table>({
  firstColumn: { type: "index", width: 80, fixed: true },
  total: 20,
  currentPage: 1,
  pageSize: 10,
  layout: "total,sizes, slot, prev, pager, next, jumper",
  prevText: "上一页",
  nextText: "下一页",
  // 接口返回数据
  data: [],
  // 表头数据
  columns: [
    { prop: "name", label: "下载任务名称" },
    { prop: "dscr", label: "下载任务说明" },
    { prop: "type", label: "取数类型",
    render: (text, record) => {
      let arr = state.listTypeInfo.statuList.filter(it=>it.key==record.type)
      let val = arr && arr.length > 0 ? arr[0].label : '';
        return val;
      },
     },
    { prop: "status", label: "取数状态",
    render: (text, record) => {
      let arr = state.listTypeInfo.fetchType.filter(it=>it.key==record.status)
      let val = arr && arr.length > 0 ? arr[0].label : '';
        return val;
      },
     },
  ],
  // 表格内操作列
  operator: [
    {
      text: "审批",
      fun: examineHandle,
      show: { key: "status", val: ["2"] },
    },
    {
      text: "日志",
      fun: logHandle
    },
    {
      text: "详情",
      fun: showInfo
    },
  ],
  // 操作列样式
  operatorConfig: {
    // fixed: "right", // 固定列表右边（left则固定在左边）
    width: 200,
    label: "操作"
  }
});
let state = reactive({
  listTypeInfo: {
    statuList: [
      {
        label: "待申请",
        key: "1",
      },
      {
        label: "审批中",
        key: "2",
      },
      {
        label: "审批通过",
        key: "3",
      },
      {
        label: "审批不通过",
        key: "4",
      },
    ],
    fetchType: [
      {
        label: "立即取数",
        key: "0",
      },
      {
        label: "预约取数",
        key: "1",
      },
    ],
  },
});
const opts = computed(() => {
  return {
    name: {
      label: "下载任务名称",
      comp: "el-input",
    },
    type: {
      label: "取数状态",
      comp: "el-select",
      changeEvent: "change",
      type: "select-arr",
      list: "statuList",
      listTypeInfo: state.listTypeInfo,
    },
    time: {
      label: "创建时间",
      comp: "el-date-picker",
      bind: {
        valueFormat: "YYYY-MM-DD"
      }
    }
  };
});
onMounted(() => {
  getData();
});
const getData = async () => {
  tableLoading.value = true
  let res;
  let obj = {
    ...queryFrom.value,
    pageNumber: table.value.currentPage,
    pageSize: table.value.pageSize,
  };
  res = await apiAxios.getQueryList(obj);
  tableLoading.value = false
  if (res) {
    table.value.total = res.total;
    table.value.data = res.result;
  }
};
// 查询条件change事件
const handleEvent = (type, val) => {
  // console.log(111, type, val)
  switch (type) {
    case "date":
      console.log("获取event==date的数据", val);
      break;
  }
};
// 点击查询按钮
const conditionEnter = (data: any) => {
  for (const key in data) {
    if (data[key] == null || data[key] == "") {
      data[key] = undefined;
    }
  }
  queryFrom.value = data;
  getData();
};
// 选择当前页码
const pageChange = (page) => {
  console.log("选择当前页码", page);
  table.value.currentPage = page;
  getData()
};
// 选择当页条数
const sizeChange = (size) => {
  console.log("选择当页条数", size);
  table.value.currentPage = 1;
  table.value.pageSize = size;
  getData()
};
</script>

<style lang="scss" scoped>
</style>
